<template>
  <p><input type="text" v-model="form.username" @input="input" /></p>
  <p><input type="password" v-model="form.password" @input="input" /></p>
  <p v-if="!isRealtime"><button @click="submit">submit</button></p>
</template>

<script>
export default {
  name: 'UserForm',
  props: {
    modelValue: Object,
    isRealtime: Boolean,
  },
  emits: ['update:modelValue'],
  computed: {
    form() {
      return JSON.parse(JSON.stringify(this.modelValue))
    },
  },
  methods: {
    emit() {
      this.$emit('update:modelValue', JSON.parse(JSON.stringify(this.form)))
    },
    input() {
      this.isRealtime && this.emit()
    },
    submit() {
      this.emit()
    },
  },
}
</script>
